<%- include('nav') %>
  <div class="text-sm breadcrumbs">
    <ul>
      <li>
        <a href="/admin/home">首页</a>
      </li>
      <li>收款记录</li>
    </ul>
  </div>

  <!-- <a href="/admin/home" class="my1 btn btn-sm btn-outline">返回</a> -->

  <div id="orders-app" style="min-width: 960px" class="col-12" data-theme="bumblebee">
    <table class="table col-12 table-zebra table-compact">
      <thead>
        <tr>
          <th>客户[邀请人]</th>
          <th>付费类型</th>
          <th>日期</th>
          <th>价格</th>
        </tr>
      </thead>
      <tr v-for="order in orders">
        <td>
          <a target="_blank" v-bind:href="'/admin/manage?clientid='+order.client._id">
            <div class="flex items-center" v-if="order.user">
              <div class="pl1 badge badge-success badge-sm">{{order.user.nickname}}</div>
            </div>
            <div v-else class="badge badge-sm badge-info">{{order.client.contactid}}</div>
          </a>
        </td>
        <td>
          <span v-if="order.room" class="m1 badge badge-info badge-sm">群续费 {{order.room.topic}}
            {{order.room.memberIdList.length}}人</span>
          <span v-else class="m1 badge badge-sm badge-warning">红包充值</span>
        </td>
        <td>{{order.datetime}}</td>
        <td>
          <div class="red bold">{{order.total_fee?order.total_fee/100:'0'}}元</div>
        </td>
      </tr>
    </table>

    <div v-if="orders.length==0" class="gray my2 center">
      <img src="/img/empty.png" style="width: 250px" class="mx-auto" />
      <div class="font-12 bold">没有更多数据了</div>
    </div>

    <div class="p1 font-12 gray center">到底了~</div>
  </div>

  <script>
    new Vue({
      el: "#orders-app",
      data: function () {
        return {
          orders: [],
        };
      },
      created: function () {
        this.fetchOrders();
      },
      methods: {
        fetchOrders: function () {
          var that = this;
          let loading = weui.loading();
          axios.get("/admin/bot/orders").then(function (res) {
            that.orders = res.data.orders;
            loading.hide();
          });
        },
      },
    });
  </script>